<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <link href="$!{__beat.server.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/App.css" type="text/css" />
    <link href="$!{__beat.server.contextPath}/bootstrap/datepicker/datepicker3.css" rel="stylesheet">
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="$!{__beat.server.contextPath}/css/wnl.css">
    <meta charset="UTF-8">
    <title>KPI-在线产品</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
                        <div class="btn-group btn-group-sm btn-tab"  id="totalOption" dateGrp='month' role="group" style="float: right">
                        <button type="button" class="btn btn-default active btnCate" dateGrp='month'>月</button>
                        <button type="button" class="btn btn-default btnCate" dateGrp='quarter'>季度</button>
                    </div> 
</div>

<div class="row" style="height:500px">

<div id="pie" class="col-xs-4" style="height:100%"></div>
<div id="bar1" class="col-xs-8" style="height:50%"></div>
<div id="bar2" class="col-xs-8" style="height:50%"></div>
    
</div>

<div class="row" style="height:50px">
	
</div>

<div class="row">
<div class="col-xs-12">
<ul id="myTabs" class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active">
      <a href="#home" id="home-tab" role="tab" class="" data-toggle="tab" aria-controls="home" aria-expanded="false">显示历史对比</a>
      </li>
      <li role="presentation" class="">
      <a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile" aria-expanded="true">显示历史趋势</a>
      </li>
    </ul>

 <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
    	<table id="pieDetail" class="table table-striped table-bordered table-hover" >
                    <thead></thead>
                    <tbody role="alert" aria-live="polite" aria-relevant="all"></tbody>
             </table>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
                  <div class="dataShow">
                <div >
                    <form class="form-inline">
                        <div  class="input-group input-group-sm" style="width: 20%;float: left">
                            <span class="input-group-addon">
                                <input id="time_checkbox" type="checkbox">
                            </span>
                            <input id="time_input" type="text" class="form-control time" placeholder="添加对比" disabled>
                        </div>
                        <div class="input-group input-group-sm btn-tab" style="margin-left: 26.5%">      
                        <div id="trend_type" dateGrp='day' class="btn-group btn-group-sm btn-tab" role="group" aria-label="Basic example"  style="float: right">
                            <button type="button" class="btn btn-default active btnPlat" dateGrp='day'>日</button>
                            <button type="button" class="btn btn-default btnPlat" dateGrp='month'>月</button>
                        </div>
                    </form>
                </div>
                <div id="trend" style="height:400px"></div>
            </div>
    </div>
  </div>
	
</div>
	
</div>
</div>
    
</body>
<script src="$!{__beat.server.contextPath}/bootstrap/jquery.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/js/libs/bootstrap.js"></script>
<script src="$!{__beat.server.contextPath}/echarts2/dist/echarts.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/js/App.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/bootstrap-datepicker.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/nongLiDate.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script type="text/javascript">




    // 路径配置
    require.config({paths: {echarts: "$!{__beat.server.contextPath}/echarts2/dist",kpiroot: "$!{__beat.server.contextPath}/js/income/kpi/"}});
	
    require(['kpiroot/kpi-online_v1'],function(obj){
    	obj.showPie("month");

    $(".btn-tab button").click(function(){
    	        $(this).addClass('active');
        $(this).siblings('button').each(function(){
            $(this).removeClass('active');
        });
         var dateGrpVal = $(this).attr('dateGrp');
        var curDiv = $(this).closest('div[dateGrp]');
        $(curDiv).attr('dateGrp',dateGrpVal);
          obj.showPie(dateGrpVal);
    });

    });

          $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      if(e.target.text=='显示历史趋势'){
        require(['kpiroot/kpi-online-trend'],function(platformEC){
        platformEC.show('day',2);
            $(".btnPlat").click(function(){
                    $(this).addClass('active');
        $(this).siblings('button').each(function(){
            $(this).removeClass('active');
        });
         var dateGrpVal = $(this).attr('dateGrp');
        var curDiv = $(this).closest('div[dateGrp]');
        $(curDiv).attr('dateGrp',dateGrpVal);
                $('#time_checkbox').attr('checked',false);
        $('#time_input').val('');
        $('#time_input').attr('disabled','');
          platformEC.show(dateGrpVal,1);
    });
    });
      }
    })


</script>
</html>